<template>
  <div class="vx-pwd">
    <slot v-if="$slots.prefix" name="prefix"></slot>
    <div class="vx-pwd-con" :id="pwdId">
      <div v-html="passHtml"></div>
    </div>
    <div class="vx-pwd-inten" v-show="pwdDegree != ''">
      <div class="vx-pwd-inten-default" :class="{ 'vx-pwd-inten-w': isW, 'vx-pwd-inten-m': isM, 'vx-pwd-inten-s': isS }"></div>
      <div class="vx-pwd-inten-default" :class="{ 'vx-pwd-inten-m': isM, 'vx-pwd-inten-s': isS }"></div>
      <div class="vx-pwd-inten-default" :class="{ 'vx-pwd-inten-s': isS }"></div>
    </div>
  </div>
</template>
<script>
import {
  createPwdObject,
  getPassInput,
  GetResponseData,
  GetPasswordLen,
  passwordCheck, // eslint-disable-next-line no-unused-vars
  getCertDN,
  // eslint-disable-next-line no-unused-vars
  getSignData, // eslint-disable-next-line no-unused-vars
  getBase64Cert,
} from '@/utils/writeObject.js';
export default {
  name: 'vx-pwd',
  data() {
    return {
      isW: false,
      isM: false,
      isS: false,
      passHtml: '',
      pwdId: '',
    };
  },
  props: {
    pwdHtml: {
      default: '',
    },
    pwdDegree: {
      default: '',
    },
  },
  created() {
    window.createPwdObject = createPwdObject;
    window.getPassInput = getPassInput;
    window.GetResponseData = GetResponseData;
    window.GetPasswordLen = GetPasswordLen;
    window.passwordCheck = passwordCheck;
    this.pwdId = new Date().getTime();
  },
  watch: {
    pwdHtml(val) {
      this.passHtml = val.input;
      this.$nextTick(() => {
        document.getElementById(this.pwdId).appendChild(val.script);
      });
    },
    pwdDegree(val) {
      if (val == 'W') {
        // 弱
        this.isM = false;
        this.isS = false;
        this.isW = true;
      } else if (val == 'M') {
        // 中
        this.isW = false;
        this.isS = false;
        this.isM = true;
      } else if (val == 'S') {
        // 强
        this.isW = false;
        this.isM = false;
        this.isS = true;
      } else {
        this.isW = false;
        this.isM = false;
        this.isS = false;
      }
    },
  },
};
</script>
<style scoped>
.vx-pwd {
  position: relative;
  width: 250px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 3s;
}
.vx-pwd > img {
  position: absolute;
  left: 4px;
  top: 10px;
}
.vx-pwd-con {
  color: #606266;
  /* margin-left: 18px; */
}
.vx-pwd-inten {
  width: 50%;
  position: absolute;
  bottom: -10px;
  left: 0;
  display: flex;
}
.vx-pwd-inten > div {
  flex: 1;
  margin: 0 5px;
  height: 4px;
  border-radius: 4px;
}
.vx-pwd-inten-default {
  background-color: #dcdfe6;
}
.vx-pwd-inten .vx-pwd-inten-w {
  background-color: red;
}
.vx-pwd-inten .vx-pwd-inten-m {
  background-color: yellow;
}
.vx-pwd-inten .vx-pwd-inten-s {
  background-color: green;
}
</style>
